<!-- OtherPages2.vue 二级菜单 -->
<template>
	<div class="box">
		

		<div class="b-main">
			<div class="b-main-box" v-for="item in oneMenus" :key="item.id">
				<div class="b-main-lef">{{item.name}}  </div>
				<ul class="b-main-rig">
					<span>全部</span>
					<li v-for="items in item.properties" :key="items.id">{{items.name}}</li>
				</ul>
			</div>
		</div>

		<div class="b-main2">
			<div class="main2-head">
				<el-radio-group >
					<el-radio-button class="h-btn" label="默认排序">默认排序</el-radio-button>
					<el-radio-button class="h-btn" label="最新商品">最新商品</el-radio-button>
					<el-radio-button class="h-btn" label="最高人气">最高人气</el-radio-button>
					<el-radio-button class="h-btn" label="评论最多">评论最多</el-radio-button>
					<el-radio-button class="h-btn" label="价格排序">价格排序</el-radio-button>
				</el-radio-group>
				<div class="main2-head-rig">
					<el-checkbox>仅显示有货商品</el-checkbox>
					<el-checkbox>仅显示特惠商品</el-checkbox>
				</div>
			</div>
			<ul class="main2-btn" ref="ulList">
				<li v-for="item,index in menuLists" :key="index" @click="onParticulars(item.id)">
					<el-image :src="item.picture" lazy></el-image>
					<p class="lip">{{item.name}}</p>
					<p class="lip1 lip">{{item.desc}}</p>
					<p class="price">￥{{item.price}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "OtherPages2",
		props: ["oneMenu","menuList"],
		data() {
			return {
				oneMenus: [],
				menuLists: [],
				pageSize: 20,
				page: 1,
				dataList: false,
				scrBoolean:true
			}
 		},
		async created() {
			setTimeout(() => {
				// console.log(this.oneMenu);
				let res = this.oneMenu;
				this.oneMenus = res.data.result.saleProperties

				let res1 = this.menuList;
				this.menuLists = res1.data.result.items
			},1500)
		},
		mounted() {
			window.addEventListener('scroll', this.lazyLoading); //监听滚动事件,注意这儿监听的方法不需要括号
		},
		destroyed() {
			window.removeEventListener('scroll', this.lazyLoading);// 页面离开时，删除监听的滚动事件
		},
		methods: {
			onParticulars(id) {
				console.log(id);
				this.$router.push("/particulars/"+id)
			},
			async lazyLoading(e) {
				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop //滚动条高度
				const clientHeight = document.documentElement.clientHeight //屏幕可视区域高度
				// const scrollHeight = document.documentElement.scrollHeight //浏览器所有内容高度
				let ulTop = this.$refs.ulList.offsetTop + this.$refs.ulList.offsetHeight
				if(scrollTop+clientHeight>ulTop&&this.scrBoolean) {
					// console.log(ulTop)
					this.scrBoolean=false;
					if(this.page>=3){
						return
					}else{
						console.log(12376)
						if(this.pageSize>=100) {
							++this.page;
							this.pageSize = 20;
						}else{
							this.pageSize += 20;
						}
						this.$http.menuLisApi({page:this.page,pageSize:this.pageSize}).then(res => {
							this.menuLists=this.menuLists.concat(res.data.result.items)
							this.scrBoolean=true;
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		background-color: #eee;

		.b-main {
			width: 1190px;
			padding: 25px;
			background-color: #fff;
			margin: 0 auto;
			.b-main-box {
				width: 100%;
				display: flex;
				// flex: 1;
				.b-main-lef {
					width: 88px;
					line-height: 44.59px;
				}
				.b-main-rig {
					width: 1110px;
					line-height: 44.59px;
					display: flex;
					flex-wrap: wrap;
					span {
						font-size: 14px;
						margin-right: 36px;
						color: #27BA9B;
					}
					li {
						margin-right: 36px;
					}
				}
			}
		}
		.b-main2 {
			width: 1190px;
			// height: 1300px;
			background-color: #fff;
			padding: 25px;
			margin: 25px auto;
			.main2-head {
				width: 1190px;
				height: 80px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.h-btn {
					// height: 30px;
					border-left: 1px solid #DCDFE6;
					margin-right: 20px;
				}
				.h-btn:first-child {
					border-left: none;
				}
				.main2-head-rig {
					width: 280px;
					height: 30px;
					display: flex;
				}
			}
			.main2-btn {
				width: 1190px;
				// height: 1300px;
				margin: 0 auto;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				li {
					width: 160px;
					height: 189.39px;
					padding: 20px 30px;
					// margin: 0 10px 0 10px;
					// background-color: #ff22;
					text-align: center;
					// float: left;
					margin-bottom: 30px;
					img {
						width: 160px;
						height: 160px;
					}
					.lip {
						padding: 10px 0 0 0;
						text-overflow: ellipsis;
						white-space: nowrap;
    					overflow: hidden;
						font-size: 16px;
						color: #333;
					}
					.lip1 {
						font-size: 14px;
						color: #999;
					}
					.price {
						font-size: 20px;
						padding-top: 10px;
						color: #cf4444;
					}
				}
			}
		}
	}
</style>